<template>
  <div>
    <p-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >


      <p-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >

         <p-row :gutter="24">
              <p-form-model-item ref="date" label="日期" prop="date">
                <p-date-picker 
                  v-model="form.date" @change="onChange" />                
              </p-form-model-item>

              <p-form-model-item ref="lineid" label="线体" prop="lineid">

                <p-select v-model="form.lineid" @change="lineChange">
                  <p-select-option v-for="(item, index) in proLineList" :key="index" :value="item.id+''">
                    {{item.wpname}}
                  </p-select-option>
                </p-select>

              </p-form-model-item>

              <p-form-model-item ref="workroomname" label="车间" prop="workroomname">
                <p-input
                  disabled
                  v-model="form.workroomname"
                />
              </p-form-model-item>
            

              <p-form-model-item ref="remark" label="备注" prop="remark">
                <p-input
                  v-model="form.remark"
                />
              </p-form-model-item>

         </p-row>  
      </p-form-model>  
    </p-modal>
  </div>
</template>
<script>

import { postAction, getAction, putAction, deleteAction } from "@/api/manage";
import moment from 'moment';

export default {
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 12
      },
      state: 'add',    
      form: {
        date: '',
        lineid: '',
        remark: '',
        workroomid: '', // 车间id
        workroomname: '',
        workroomno: ''
      },
      rules: {
        date: [
          { required: true, message: '请选择日期', trigger: 'blur' },
        ],
        lineid: [
          { required: true, message: '请选择线体', trigger: 'blur' },
        ],
      },      
      proLineList: [],
      url: {
        add: '/mes-manpower/mesHrLineSkill',
        edit: '/mes-manpower/mesHrLineSkill',
        proLineList: '/basic-business/mesBaArchitecture/proLineList'
      }
    };
  },
  computed: {
    title(){
      return  {"add": "新增", "edit": "编辑"}[this.state]
    }
  },
  mounted(){
    this.getProLineList()
  },
  methods: {
    moment,
    getProLineList(){
      getAction(this.url.proLineList).then( res => {
        if(res.success) {
          this.proLineList = res.data
        }
      } )
    },

    // 选择线体
    lineChange(val){
      console.log(val);
      
      this.proLineList.forEach( ele => {
        if(val == ele.id) {
          this.form.workroomid = ele.fwpid
          this.form.workroomname = ele.fwpname
          this.form.workroomno = ele.fwpno
          this.form.linename = ele.wpname
          this.form.lineno = ele.wpno
        }
      } )
    },

    showModal(record) {
      
      Object.assign(this.form, this.$options.data().form)

      if(record) {
        this.state = 'edit'
        for (let key in this.form) {
          this.form[key] = record[key]
        }
        this.form.date = this.moment(this.form.date)
        this.editId = record.id
      } else {
        this.state = 'add'
      }

      this.visible = true;
    },
    handleOk(e) {
      const params = {
        ...this.form
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          
          this.confirmLoading = true;
          if(this.state == 'add' ) {
            postAction(this.url.add, params).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })
          }

          if( this.state == 'edit' ){     
            params.id = this.editId
            putAction(this.url.edit, params).then(res => {
              if( res.success ) {
                this.visible = false
                this.$emit('handleSuccess')
              }else {
                this.$message.error(res.msg)
              }
              this.confirmLoading = false;
            })
          }

        }
      })

    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
};
</script>
